<template>
  <div class="New_build">
    <div class="mask"></div>
    <div class="new_build">
      <div class="build-top">
        <p>补单（仓库盘差明细查询）</p>
        <i class="el-icon-close" @click="closeSporder"></i>
      </div>

      <div class="build-info">
        <div class="build-info-1">
          <p>盘差日期</p>
          <el-date-picker
            v-model="differTime"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
          <p>单号</p>
          <el-input v-model="receiptsNumber" class="build-inp"></el-input>

          <p>仓库编号</p>

          <el-input v-model="warehouseNo" class="build-inp" disabled></el-input>

          <!-- <el-select
            v-model="warehouseNo"
            @change="
              e => {
                this.warehouseName = e
              }
            "
          >
            <el-option
              v-for="item in warehouseList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->

          <!-- <p>售价</p>
          <el-input
            v-model="sellingPrice"
            disabled
            class="build-inp"
          ></el-input> -->
          <p>盘差序号</p>
          <el-input v-model="sequence" disabled class="build-inp"></el-input>
          <p>仓库</p>
          <el-input
            v-model="warehouseName"
            disabled
            class="build-inp"
          ></el-input>
        </div>
        <!-- <div class="build-info2">
          <p>盘差序号</p>
          <el-input v-model="sequence" disabled class="build-inp"></el-input>
          <p>仓库</p>
          <el-input
            v-model="warehouseName"
            disabled
            class="build-inp"
          ></el-input>
        </div> -->

        <div class="build-info-4" style="margin-top: 20px">
          <el-table
            border
            :data="codeData"
            id="codeTable"
            style="width:100%;margin-bottom:20px"
            max-height="148px"
            :header-cell-style="{
              background: '#f4f4f4',
              padding: 0,
              height: '40px'
            }"
            :cell-style="{ padding: 0, height: '36px' }"
          >
            <el-table-column :label="header"> </el-table-column>
            <el-table-column prop="colorName" label="颜色"> </el-table-column>

            <template v-for="col in sizeList">
              <el-table-column
                :key="col + Math.random()"
                :prop="col"
                :label="col"
              >
                <template slot-scope="scope">
                  <!-- <el-form :v-model="scope.row"> -->
                  <!-- <el-form-item> -->
                  <!-- <el-input v-model="scope.row[col]" @blur="handleClick(scope.$index,scope.row[col])" ></el-input>
                    <span>{{scope.row[col]}}</span> -->
                  <!-- </el-form-item> -->
                  <!-- </el-form> -->

                  <el-input
                    size="small"
                    class="innerInp"
                    v-model="scope.row[col]"
                    @blur="
                      handleClick($event, {
                        index: scope.$index,
                        key: col,
                        result: scope.row[col]
                      })
                    "
                    @keyup.enter.native="inpEnter"
                  >
                  </el-input>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
        <!-- 后端要求注释这个条形码 区域 -->
        <!-- <div class="barcode">
          <p>条码扫描</p>
          <el-switch
            v-model="isBarcode"
            active-color="#409EFF"
            inactive-color="#C0C4CC"
          >
          </el-switch>
          <p style="margin-left:50px;">
            冲减单子. 点"款号"， 请按F7，把数量填成-1
          </p>
        </div> -->

        <div class="chose">
          <!-- <p>条码扫描</p>
          <el-radio :disabled="!isBarcode" v-model="radio" label="1">货号码</el-radio>
          <el-radio :disabled="!isBarcode" v-model="radio" label="2">ID码</el-radio>
          <i class="el-icon-question" style="color:#017aff;margin:4px 6px 0 15px;"></i> -->
        </div>

        <div class="enterBarcode">
          <el-input
            @keyup.enter.native="scanning($event)"
            v-model="searchValue"
            placeholder="扫描/输入条码,输完按回车"
            id="input"
          ></el-input>
          <!-- <el-input placeholder="不一致的情况手输货号，输完按回车"></el-input> -->
          <!-- <i class="el-icon-question" style="color:#017aff;margin:4px 6px 0 15px;"></i>
          <p>冲减单子. 点"货号"， 请按F7，把数量填成-1</p> -->
        </div>

        <el-table
          height="210px"
          :data="barcodeData"
          style="width: 100%"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '36px' }"
        >
          <el-table-column prop="sequence" label="仓库盘点序号" width="120px">
          </el-table-column>
          <el-table-column prop="receiptsNumber" label="单号">
          </el-table-column>
          <el-table-column prop="warehouseNo" label="仓库编号">
          </el-table-column>
          <el-table-column prop="kindsNumber" label="货号" width="110">
          </el-table-column>
          <el-table-column prop="sellingPrice" label="售价"> </el-table-column>
          <el-table-column prop="differNumber" label="盘差数量">
          </el-table-column>
          <el-table-column prop="differMoney" label="盘差金额">
          </el-table-column>
          <el-table-column prop="differTime" label="盘差日期" width="100">
          </el-table-column>
          <el-table-column prop="curency" label="币种"> </el-table-column>
          <el-table-column prop="operator" label="操作员"> </el-table-column>
          <el-table-column prop="enteringTime" label="录入时间" width="160">
          </el-table-column>
          <el-table-column prop="status" label="修改状态"> </el-table-column>
        </el-table>
      </div>

      <div class="build-btn">
        <div style="margin:5px 20px 0 0">
          <el-button @click="closeSporder">取消</el-button>
          <!-- 下面这个是我注释 -->
          <!-- <el-button type="primary" plain @click="saveSporder">保存</el-button> -->
          <el-button type="primary" plain @click="keepGoing_02">保存</el-button>
          <!-- <el-button type="primary" @click="keepGoing">继续录入</el-button> -->
        </div>
      </div>
      <!-- 下面结构可以注释，在扫描情况下，会弹出这个dialog,现在扫描已经被注释 -->
      <div class="popup" :style="{ display: showPopup }">
        <div class="popup_t">
          <p>输入扫描数量</p>
          <i class="el-icon-close" @click="closePopup"></i>
        </div>
        <div class="popup_c">
          <p>请输入扫描数量</p>
          <p>如果不输入则扫描数量为1</p>
          <el-input v-model="one" style="margin-top:10px"></el-input>
          <!-- <input type="text" v-model="one" class="popup_button"> -->
        </div>
        <div class="popup_b">
          <el-button @click="closePopup">取消</el-button>
          <el-button @click="preservation" type="primary">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 映入要修改的接口，同继续录入的接口
import { continue_to_enterApi } from '../../../../network/customerOutTotal'
// import { kindsNumberOutContinue, kindsNumberOut } from '../../../../network/customerOutTotal'
import { getWarehouse } from '../../../../network/warehouse'
import {
  getBarCode,
  getScanning,
  getDetailed
} from '../../../../network/manufacturer'
import { getNumber } from '../../../../network/customerOutTotal'
import { getKindsNumberList } from '../../../../network/artNo'
// 引入mixins的方法
import enterUp from '../../../../components/mixins/enterUp'
import today from '../../../../components/mixins/today'
export default {
  mixins: [enterUp, today],
  props: {
    showData: {
      type: Object,
      default: {}
    },
    tableData1: {
      type: Array,
      default: []
    }
  },
  created() {
    this.differTime = this.getNowTime() // 这个是实时的获取盘差日期
    //仓库编号
    getWarehouse().then(res => {
      res.data.data.forEach(e => {
        this.warehouseList.push({ value: e.no, label: e.name })
        if (e.isMainWarehouse) {
          this.warehouseNo = e.no
          this.warehouseName = e.name
        }
      })
    })
  },
  data() {
    return {
      one: 1,
      receiptsNumber: '',
      warehouseList: [],
      warehouseNo: '',
      sellingPrice: '',
      sequence: '',
      warehouseName: '',
      showPopup: 'none',
      differTime: '',
      isBarcode: false,
      color: '',
      // radio: '1',
      searchValue: '',
      barcodeData: [],
      AAa: [],
      enteringTime: '',
      sizeList: [], // 是table表格的尺码表头数据
      codeData: [], // codeData 是一个大数组，里面每一项的对象，都是表格里面input输入框每一行的数据

      header: '',
      barcodeData1: [],
      state: ''
    }
  },
  methods: {
    // 点击保存的时候触发的函数，和继续录入时一样的
    async keepGoing_02() {
      console.log(this.codeData, 'keepGoing_02') // 拿到添加在表格中的数据
      // 这里不用拿用户的数据，因为已经赋值了 （证明是点击表格自动填充的，有数据，可以补单）
      //用户没有输入数据，不能补单直接return
      if (
        !this.searchValue ||
        !this.receiptsNumber ||
        this.codeData.length === 0 // 就是表格中的input每一行的数据为空,那么就直接return
      ) {
        return
      }
      // 变量不能为Object的键，那么就直接用Map构造器
      let myMap = new Map()
      // 遍历codeData数组，这个数组包含表格中，每一行input的数据
      this.codeData.map(item => {
        for (const key in item) {
          if (key !== 'colorName' && key !== 'colorNo' && item[key] !== '') {
            // console.log(key) // 不符合的key根本进不了
            const mapKey = this.searchValue + '-' + item.colorNo + key // item.colorNo是通过item直接取外面的
            // console.log(mapKey) // 键
            // 将输入的字符串变成数字
            const mapValue = Number(item[key]) // 取进来的key的值

            // 为map对象实例添加key和value
            myMap.set(mapKey, mapValue)
            // console.log(bb, 'value')
            // console.log(myMap, 'myMap')
          }
        }
      })
      // 遍历的map数据的时候，拼接成一个普通的object
      let makeMapObj = {}
      // map集合想要变成对象，还要遍历才行
      for (const key of myMap) {
        makeMapObj[key[0]] = key[1]
      }
      console.log(makeMapObj, 'makeMapObj')
      // 拿到map对象
      // 遍历this.codeData，如果不等于空，那么就拿出来组成一个map的集合给后端
      // 拼接要发给后端的参数对象
      const continueEnterParamsObj = {
        kindsNumberMap: makeMapObj, // map集合，值是一个对象，里面包含货号和数量
        receiptsNumber: this.receiptsNumber, // 单号
        sequence: this.sequence, // 盘差序号
        time: this.differTime, // 盘差日期
        warehouseNo: this.warehouseNo // 仓库编号
      }
      // 这个是发起参数的api,参数要用json转换，否则后端报时间格式错误
      const { data: res } = await continue_to_enterApi(
        JSON.stringify(continueEnterParamsObj)
      )
      console.log(res)
      // 拿到数据发个后端，后端返回来的数据
      if (!res) return // 返回undefined直接return
      if (res.code !== 200) return
      // 下面是请求成功的逻辑
      // this.sequence = res.data[0].sequence // 拿到盘差序号展示
      // 拿到数据之后，直接放在底部表格展示
      this.barcodeData = res.data
      // 定义一个自定义事件，把拿到的这个表格数据，直接给父组件展示
      // this.$emit('changeParentComponentTableData', res.data)
      // 然后要清空input里面的数据（codedata）里面的数据
      this.codeData = []
      // 清空款号
      this.searchValue = ''
    },
    // --------------------------------------------------------------
    inpEnter(e) {
      // console.log(e)
      e.target.parentNode.parentNode.parentNode.classList.remove('activeCell')
    },
    handleClick(e, { index, key, result }) {
      // let r = /^\+?[1-9][0-9]*$/
      let r = /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/
      if (result != 0) {
        result = result.replace(/\b(0+)/gi, '')
      }
      if (!r.test(result) && result) {
        this.$alert('数量请输入整数', '', {
          confirmButtonText: '确定'
        })
        this.codeData[index][key] = 0
        return
      }
      this.codeData[index][key] = result
    },

    //条码扫描
    scanning() {
      if (this.isBarcode == false) {
        console.log('条码扫描关')
        // 手输款号
        getKindsNumberList({ kindsNumberStr: this.searchValue }).then(res => {
          this.XHList = res.data.data.data
          console.log(this.XHList)
          if (res.data.data.data.length) {
            this.header = res.data.data.data[0].styleNumber
            this.$emit('inpNumChange')
            // 品牌公司查条码规律详情
            getBarCode({ company: res.data.data.data[0].brandedCompany }).then(
              res => {
                // console.log(res)
                this.manufacturerBarCode = res.data.data[0]
              }
            )
            // console.log(this.manufacturerBarCode)
            // 输入款号显示中间表和尺码信息   ZZZ-AAS
            res.data.data.data.sort((a, b) => {
              return a.relevanceSize.localeCompare(b.relevanceSize)
            })
            let tmp = res.data.data.data
            this.tmpBarcodeData = tmp
            // console.log(tmp)

            // 中间表  尺码表头
            this.sizeList = [tmp[0].size]
            let isExistSize = 0
            for (const i of tmp) {
              for (const j of this.sizeList) {
                if (j == i.size) {
                  isExistSize = 0
                  break
                }
                isExistSize = 1
              }
              if (isExistSize) {
                this.sizeList.push(i.size)
                console.log(this.sizeList)
              }
            }

            // 中间表
            let tmpCodeData = [
              { colorNo: tmp[0].colorNo, colorName: tmp[0].colorName }
            ]
            let isExistColor = 0
            for (const i of tmp) {
              for (const j of tmpCodeData) {
                if (j.colorName == i.colorName) {
                  isExistColor = 0
                  break
                }
                isExistColor = 1
              }
              if (isExistColor) {
                tmpCodeData.push({ colorNo: i.colorNo, colorName: i.colorName })
              }
            }
            tmpCodeData.forEach(e => {
              this.sizeList.forEach(f => {
                e[f] = ''
              })
            })
            this.codeData = tmpCodeData
            let codeTable = document.getElementById('codeTable')
            let inputs = codeTable.getElementsByTagName('input')
            // console.log(inputs)
            let int = setInterval(() => {
              clearInterval(int)
              inputs[0].focus()
              inputs[inputs.length - 1].onkeyup = e => {
                if (window.event.keyCode == 13) {
                  this.continueInput()
                  this.codeData = []
                  inputs[inputs.length - 1].onkeyup = () => {}
                }
              }
            }, 100)
          } else {
            this.$message('此货号/款号无数据')
            this.$refs.barcodeInput.focus()
          }
        })
      } else {
        //条码扫描 开
        if (
          this.differTime == '' ||
          this.receiptsNumber == '' ||
          this.warehouseNo == '' ||
          this.searchValue == ''
        ) {
          this.$alert('盘差日期，单号,仓库编号,条码扫描框不能为空', '', {
            confirmButtonText: '确定'
          })
          return
        }
        let kindsNumberNumberMap = {}
        kindsNumberNumberMap[this.searchValue] = Number(this.one)
        console.log(kindsNumberNumberMap)
        let obj3 = {
          companyNo: this.warehouseNo,
          kindsNumberNumberMap
        }
        getNumber(JSON.stringify(obj3)).then(res => {
          console.log(res.data)
          if (res.data.code == 202) {
            this.$message.error({
              message: '查无此对象'
            })
            return
          }
          if (res.data.data == this.searchValue) {
            this.$message.error({
              message: '此货号库存不够'
            })
            return
          } else {
            let obj2 = {
              // isKindsNumber:tf,
              isKindsNumber: 1,
              searchValue: this.searchValue
            }
            getScanning(obj2).then(res => {
              console.log(res.data)
              if (res.data.data == null) {
                this.$alert('没有该货号数据', '', {
                  confirmButtonText: '确定'
                })
              }
              this.AAa = res.data.data

              for (let e in this.AAa) {
                this.differMoney = this.AAa[e].sellingPrice * this.one
                delete this.AAa[e].id //删除id对象
                this.AAa[e]['receiptsNumber'] = this.receiptsNumber
                this.AAa[e]['warehouseNo'] = this.warehouseNo
                this.AAa[e]['differTime'] =
                  this.differTime.getFullYear() +
                  '-' +
                  (this.differTime.getMonth() + 1) +
                  '-' +
                  this.differTime.getDate() //改为标准日期
                this.AAa[e]['differNumber'] = this.one
                this.AAa[e]['differMoney'] = this.differMoney
                this.AAa[e]['curency'] = '￥'
                this.AAa[e]['status'] = 0
                this.AAa[e]['dataSource'] = this.radio == '1' ? 1 : 0
                this.Dis = true
              }

              if (this.barcodeData == '') {
                this.barcodeData = this.AAa
              } else {
                this.merge(this.barcodeData, this.AAa)
                // this.AAa为一条数据 两组数据比较 this.barcodeData数组对象里的kindsNumber与this.AAa数组对象里的kindsNumber一样 sum 就相加 else 就push进this.barcodeData
              }
              console.log(this.barcodeData)

              this.howMany = this.barcodeData.reduce((prev, next) => {
                return prev + next.differNumber
              }, 0)
              console.log(this.barcodeData)
              this.searchValue = ''
              document.getElementById('input').focus()
            })
          }
        })
      }
    },

    merge(target, source) {
      const targetIds = target.reduce(
        (res, v) => res.add(v.kindsNumber),
        new Set()
      )
      const sourceIds = source.reduce(
        (res, v) => res.add(v.kindsNumber),
        new Set()
      )
      target.forEach(v => sourceIds.has(v.kindsNumber) && v.differNumber++)
      return target.push(...source.filter(v => !targetIds.has(v.kindsNumber)))
    },

    closeSporder() {
      this._remove()
      // 触发这个事件关闭弹出层
      this.$emit('closeSporder')
      this.state = ''
    },
    //点击保存按钮的时候，触发的函数
    saveSporder() {
      let params = this.barcodeData
      console.log(params)
      // 子组件点击保存的时候，拿到数组，给父组件发起ajax
      this.$emit('saveSporder', params)
      this._remove()
      this.state = ''
    },

    closePopup() {
      this.showPopup = 'none'
    },

    //F7改数量
    preservation() {
      this.one = this.one
      console.log(this.one)
      this.showPopup = 'none'
      this.$alert('数量设置成功', '', {
        confirmButtonText: '确定'
      })
      // console.log(this.barcodeData)
    },

    _remove() {
      // 单号也不用删除（在这里是直接拿后台数据来展示的）
      // this.receiptsNumber = ''
      // 仓库编号不能删除
      // this.warehouseNo = ''
      // 售价在结构后端要求注释了
      // this.sellingPrice = ''
      // 盘差序号不能删除
      // this.sequence = ''
      // 仓库名字不能删除
      // this.warehouseName = ''
      this.searchValue = ''
      // 下面这个是后端要求注释（点击取消按钮和关闭小图标的时候，底部表格数据不能清空）
      // this.barcodeData = []
      // 清空中间表格数据
      this.codeData = []
      // 清除表头数据
      this.sizeList = []
    },

    continueInput() {
      if (this.differTime == '' || this.warehouseNo == '') {
        this.$message({
          type: 'warning',
          offset: 400,
          message: '盘差日期，仓库编号不能为空'
        })
        return
      }

      let kindsNumberNumMap = {}
      if (this.isBarcode) {
        // 扫描
        // if (this.radio == 1) {
        //   // 扫描货号码
        //   kindsNumberNumMap[this.searchValue] = this.one
        // } else if (this.radio == 2) {
        //   // 扫描ID码
        //   searchKindsNumber({
        //     // 条码与货号是否一致
        //     isSame: false,
        //     // 是否开启条码扫描
        //     isScanner: true,
        //     searchValue: this.searchValue
        //   }).then(res => {
        //     console.log(res)
        //     kindsNumberNumMap[res.data.data[0].kindsNumber] = this.one
        //   })
        // }
      } else {
        // 输入
        let knList = []
        // codeData 是一个大数组，里面每一项的对象，都是表格里面input输入框每一行的数据
        this.codeData.forEach(e => {
          let c = e.colorNo
          this.sizeList.forEach(f => {
            if (this.manufacturerBarCode.styleColorSize) {
              // 型尺色

              if (this.manufacturerBarCode.styleColor) {
                // 款号与尺码之间有 -

                if (this.manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  knList.push({
                    kindsNumber: `${this.header}-${f}-${c}`,
                    sum: e[f]
                  })
                } else {
                  // 色号与尺码之间没有 -
                  knList.push({
                    kindsNumber: `${this.header}-${f}${c}`,
                    sum: e[f]
                  })
                }
              } else {
                // 款号与尺码之间没有 -

                if (this.manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  knList.push({
                    kindsNumber: `${this.header}${f}-${c}`,
                    sum: e[f]
                  })
                } else {
                  // 色号与尺码之间没有 -
                  knList.push({
                    kindsNumber: `${this.header}${f}${c}`,
                    sum: e[f]
                  })
                }
              }
            } else {
              // 型色尺

              if (this.manufacturerBarCode.styleColor) {
                // 款号与颜色之间有 -

                if (this.manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  knList.push({
                    kindsNumber: `${this.header}-${c}-${f}`,
                    sum: e[f]
                  })
                } else {
                  // 色号与尺码之间没有 -
                  knList.push({
                    kindsNumber: `${this.header}-${c}${f}`,
                    sum: e[f]
                  })
                }
              } else {
                // 款号与颜色之间没有 -

                if (this.manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  knList.push({
                    kindsNumber: `${this.header}${c}-${f}`,
                    sum: e[f]
                  })
                } else {
                  // 色号与尺码之间没有 -
                  knList.push({
                    kindsNumber: `${this.header}${c}${f}`,
                    sum: e[f]
                  })
                }
              }
            }
          })
        })
        console.log(knList)
        this.XHList1 = knList
        var kindList = {}
        knList.forEach(e => {
          if (e.sum != '') {
            kindList[e.kindsNumber] = e.sum
          }
        })
        console.log(kindList)
      }

      //判断库存够不够
      let kindsNumberNumberMap = kindList
      let obj3 = {
        companyNo: this.warehouseNo,
        kindsNumberNumberMap
      }
      console.log(obj3)
      getNumber(JSON.stringify(obj3)).then(res => {
        console.log(res.data, '点击保存触发的api')
        if (res.data.code == 202) {
          this.$message.error({
            message: '查无此对象'
          })
          return
        }
        for (var g in this.XHList1) {
          for (let k in res.data.data) {
            if (
              this.XHList1[g].kindsNumber == res.data.data[k] ||
              this.XHList1[g].sum == ''
            ) {
              this.$message.error({
                message: `${res.data.data}'货号库存不够'`
              })
              this.XHList1.splice(g, 1)
              // console.log(this.XHList1[g].sum)
            }
          }
        }
        console.log(this.XHList1)
        for (let a in this.XHList1) {
          for (let b in this.XHList) {
            if (
              this.XHList1[a].kindsNumber == this.XHList[b].kindsNumber &&
              this.XHList1[a].sum != ''
            ) {
              this.XHList[b]['sequence'] = this.sequence
              this.XHList[b]['receiptsNumber'] = this.receiptsNumber
              this.XHList[b]['warehouseNo'] = this.warehouseNo
              this.XHList[b]['differTime'] =
                this.differTime.getFullYear() +
                '-' +
                (this.differTime.getMonth() + 1) +
                '-' +
                this.differTime.getDate()
              this.XHList[b]['curency'] = '￥'
              this.XHList[b]['differNumber'] = this.XHList1[a].sum
              this.XHList[b]['differMoney'] =
                Number(this.XHList[b].differNumber) *
                Number(this.XHList[b].sellingPrice)
              this.barcodeData1.push(this.XHList[b])
              console.log(this.barcodeData1)
            }
            this.eliminate()
          }
        }
      })
    },

    eliminate() {
      //数组对象里 kindsNumber相同  数量相加 合并
      this.state = 1
      console.log(this.barcodeData1)
      var tmp = {}
      for (let u in this.barcodeData1) {
        var key = this.barcodeData1[u].kindsNumber
        console.log(tmp[key])
        if (tmp[key]) {
          console.log(1)
          tmp[key].kindsNumber = this.barcodeData1[u].kindsNumber
          tmp[key].differNumber += Number(this.barcodeData1[u].differNumber)
          tmp[key].sequence = this.barcodeData1[u].sequence
          tmp[key].receiptsNumber = this.barcodeData1[u].receiptsNumber
          tmp[key].warehouseNo = this.barcodeData1[u].warehouseNo
          tmp[key].differTime = this.barcodeData1[u].differTime
          tmp[key].curency = this.barcodeData1[u].curency
          tmp[key].differMoney =
            Number(this.barcodeData1[u].differNumber) *
            Number(this.barcodeData1[u].sellingPrice)
          tmp[key].affirm = this.barcodeData1[u].affirm
          tmp[key].id = this.barcodeData1[u].id
          tmp[key].monthly = this.barcodeData1[u].monthly
          tmp[key].onePrice = this.barcodeData1[u].onePrice
          tmp[key].sellingPrice = this.barcodeData1[u].sellingPrice
          tmp[key].softwareCustomerId = this.barcodeData1[u].softwareCustomerId
          tmp[key].status = this.barcodeData1[u].status
          tmp[key].warehouseName = this.barcodeData1[u].warehouseName
        } else {
          tmp[key] = {}
          tmp[key].kindsNumber = this.barcodeData1[u].kindsNumber
          tmp[key].differNumber = Number(this.barcodeData1[u].differNumber)
          tmp[key].sequence = this.barcodeData1[u].sequence
          tmp[key].receiptsNumber = this.barcodeData1[u].receiptsNumber
          tmp[key].warehouseNo = this.barcodeData1[u].warehouseNo
          tmp[key].differTime = this.barcodeData1[u].differTime
          tmp[key].curency = this.barcodeData1[u].curency
          tmp[key].differMoney =
            Number(this.barcodeData1[u].differNumber) *
            Number(this.barcodeData1[u].sellingPrice)
          tmp[key].affirm = this.barcodeData1[u].affirm
          tmp[key].id = this.barcodeData1[u].id
          tmp[key].monthly = this.barcodeData1[u].monthly
          tmp[key].onePrice = this.barcodeData1[u].onePrice
          tmp[key].sellingPrice = this.barcodeData1[u].sellingPrice
          tmp[key].softwareCustomerId = this.barcodeData1[u].softwareCustomerId
          tmp[key].status = this.barcodeData1[u].status
          tmp[key].warehouseName = this.barcodeData1[u].warehouseName
        }
      }
      this.barcodeData = []
      for (let k in tmp) {
        this.barcodeData.push(tmp[k])
      }
      console.log(this.barcodeData)
    }
  },

  mounted() {
    let _this = this
    document.onkeydown = function(event) {
      let e = event || window.event || arguments.callee.caller.arguments[0]
      if (e && e.keyCode == 118) {
        // 按 F7
        // console.log("ffffffffff")
        if (_this.showPopup == 'none') {
          _this.showPopup = 'block'
        } else {
          _this.showPopup = 'none'
        }
      }
    }
  },

  watch: {
    receiptsNumber(a, b) {
      if (a) {
        this.receiptsNumber = a.toUpperCase().trim()
      }
    },
    searchValue(a, b) {
      if (a) {
        this.searchValue = a.toUpperCase().trim()
      }
    },
    showData(a, b) {
      console.log(a)
      this.receiptsNumber = a.receiptsNumber
      this.warehouseNo = a.warehouseNo
      this.sellingPrice = a.sellingPrice
      this.sequence = a.sequence
      this.enteringTime = a.enteringTime
      // this.warehouseName = a.warehouseName
    },
    tableData1(a, b) {
      if (this.state != 1) {
        // console.log('log1111111111')
        this.barcodeData1 = this.tableData1
        this.barcodeData = this.tableData1
        this.receiptsNumber = this.tableData1[0].receiptsNumber
      }
    }
  }
}
</script>

<style scoped>
.middle {
  padding: 10px 15px;
}
.middle p {
  padding-bottom: 10px;
}
._top {
  display: flex;
  width: 100%;
  height: 40px;
  padding: 10px 15px;
  justify-content: space-between;
  background: #f8f8f8;
  font-weight: 700;
}

.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 9;
}
.new_build {
  position: fixed;
  /* position: relative; */
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 1080px;
  height: 660px;
  z-index: 99;
  background-color: white;
  overflow: auto;
}
.new_build .build-top {
  height: 40px;
  background-color: #f8f8f8;
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
}
.build-top p {
  font-weight: 700;
}

.build-info {
  padding: 0 15px;
  padding-bottom: 10px;
  /* border-bottom: buildlid #f2f2f2 2px; */
}
.build-info-1 p {
  display: inline-block;
  width: 80px;
  text-align: right;
  margin-right: 15px;
}

.build-info .barcode p {
  display: inline;
  margin-right: 15px;
}
.build-info .barcode div {
  margin-top: 15px;
}

.barcode-info-1 p,
.barcode-info-2 p {
  display: inline-block;
  width: 96px;
  text-align: right;
  margin-right: 9px;
}
.build-info2 {
  display: flex;
  margin: 10px 0;
}
.build-info2 p {
  display: inline-block;
  width: 80px;
  text-align: right;
  margin-right: 15px;
}

.colorBox,
.infoBox {
  display: inline;
}

.enterBarcode {
  height: 60px;
  background-color: #f2f2f2;
  margin: 15px 0;
  display: flex;
}
.enterBarcode i {
  line-height: 50px;
}
.enterBarcode p {
  line-height: 55px;
}

.build-btn {
  text-align: right;
}

.build-inp {
  width: 160px;
}

.popup {
  width: 400px;
  height: 200px;
  border: 1px solid #dbdbdb;
  box-shadow: 0 2px 2px 2px #dbdbdb;
  z-index: 999;
  position: absolute;
  left: 30%;
  top: 20%;
  /* margin:-100px 0 0 -200px; */
  background: white;
  /* display: block; */
}
.popup_t {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  background: rgb(244, 244, 244);
  padding: 8px 15px;
}
.popup_t p {
  font-weight: 700;
}
.popup_c {
  padding: 8px 15px;
}
.popup_button {
  margin: 5px 0 0 0;
  width: 94%;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
}
.popup_button:focus {
  outline: none;
  border: 1px solid #017fff;
}
.popup_b {
  margin: 10px 0 0 0;
  padding-left: 230px;
}
.chose {
  display: flex;
  margin: 10px 0;
}
</style>

<style>
.new_build .build-info-4 .el-table .cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 41px;
  padding-right: 10px;
  height: 40px;
}
.new_build .build-info-4 .el-input__inner {
  border: 0px;
}
.new_build .build-info-4 .el-input__inner:focus {
  border: 1px solid #017aff;
}

/* .new_build .build-info-1 .el-input, .new_build .build-info-3 .el-input{
    width: 425px;
  } */
.new_build .build-info-1 .el-input,
.new_build .build-info-2 .el-input {
  margin-top: 10px;
  width: 160px;
}
.new_build .el-input__inner {
  height: 30px !important;
}
.new_build .el-input__icon {
  line-height: 30px !important;
}
.build-info .barcode .el-switch {
  margin: 0 !important;
}

.new_build .enterBarcode .el-input {
  width: 535px;
  margin: 14px 17px;
}

.new_build .chose .el-radio {
  margin: 5px 20px 0 10px;
}
</style>
